<template>
  <view class="payment">
    <!-- 导航栏 -->
    <NavBar title="订单支付" />

    <!-- 支付金额 -->
    <view class="amount-section">
      <view class="amount-title">支付金额</view>
      <view class="amount-value">
        <text class="currency">¥</text>
        <text class="value">{{ amount }}</text>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="section-title">支付方式</view>
      <view class="method-list">
        <view 
          class="method-item" 
          v-for="(method, index) in paymentMethods" 
          :key="index"
          :class="{ active: selectedMethod === method.value }"
          @click="selectPaymentMethod(method.value)"
        >
          <view class="method-icon">
            <component :is="getIconComponent(method.icon)" size="24px" />
          </view>
          <view class="method-info">
            <view class="method-name">{{ method.name }}</view>
            <view class="method-desc">{{ method.desc }}</view>
          </view>
          <view class="method-selected">
            <component 
              :is="selectedMethod === method.value ? 'Checklist' : 'Circle'"
              :color="selectedMethod === method.value ? '#fa2c19' : '#ddd'"
              size="20px" 
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="label">订单编号</text>
        <text class="value">{{ orderInfo.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="label">创建时间</text>
        <text class="value">{{ orderInfo.createTime }}</text>
      </view>
    </view>

    <!-- 底部支付按钮 -->
    <view class="bottom-action">
      <nut-button type="primary" block @click="handlePayment">立即支付</nut-button>
    </view>

    <!-- 支付结果弹窗 -->
    <nut-popup v-model:visible="showPaymentResult" :style="{ padding: '30px 50px' }">
      <view class="payment-result">
        <view class="result-icon">
          <Checked size="40px" color="#07c160" v-if="paymentSuccess" />
          <Close size="40px" color="#fa2c19" v-else />
        </view>
        <view class="result-title">{{ paymentSuccess ? '支付成功' : '支付失败' }}</view>
        <view class="result-desc">{{ paymentSuccess ? '您的订单已支付成功' : '请重新尝试支付' }}</view>
        <view class="result-actions">
          <nut-button type="primary" size="small" @click="goToOrderDetail">查看订单</nut-button>
          <nut-button plain size="small" @click="goToHome" v-if="paymentSuccess">返回首页</nut-button>
          <nut-button plain size="small" @click="retryPayment" v-else>重新支付</nut-button>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import NavBar from '../../components/NavBar/index.vue'
import orderApi from '../../api/order'
import { Checked, Close, Checklist, Circle, Shop, JoySmile } from '@nutui/icons-vue-taro'

// 获取订单ID和支付金额
const router = Taro.getCurrentInstance().router
const orderId = router?.params.id
const amount = ref(router?.params.amount || '0.00')

// 订单信息
const orderInfo = ref({
  id: '',
  orderNo: '',
  createTime: '',
  payAmount: '0.00'
})

// 支付方式
const paymentMethods = [
  {
    name: '微信支付',
    value: 1,
    icon: 'weixin',
    desc: '推荐使用微信支付'
  },
  {
    name: '支付宝',
    value: 2,
    icon: 'zhifubao',
    desc: '支付宝安全支付'
  }
]

// 获取图标组件
const getIconComponent = (iconName) => {
  const iconMap = {
    'weixin': Shop,     // 使用Shop图标替代Weixin
    'zhifubao': JoySmile  // 使用JoySmile图标替代Zhifubao
  }
  return iconMap[iconName] || 'div'
}

// 选中的支付方式
const selectedMethod = ref(1)

// 支付结果
const showPaymentResult = ref(false)
const paymentSuccess = ref(false)

// 选择支付方式
const selectPaymentMethod = (method: number) => {
  selectedMethod.value = method
}

// 获取订单信息
const fetchOrderInfo = () => {
  if (!orderId) return
  
  orderApi.getOrderDetail(orderId).then(res => {
    orderInfo.value = res.data
  }).catch(err => {
    Taro.showToast({
      title: err.message || '获取订单信息失败',
      icon: 'none'
    })
  })
}

// 处理支付
const handlePayment = () => {
  if (!orderId) return
  
  Taro.showLoading({ title: '支付处理中...' })
  
  orderApi.payOrder(orderId, selectedMethod.value).then(() => {
    Taro.hideLoading()
    // 模拟支付过程
    setTimeout(() => {
      paymentSuccess.value = true
      showPaymentResult.value = true
      // 轮询支付状态
      checkPaymentStatus()
    }, 1000)
  }).catch(err => {
    Taro.hideLoading()
    Taro.showToast({
      title: err.message || '支付失败',
      icon: 'none'
    })
    paymentSuccess.value = false
    showPaymentResult.value = true
  })
}

// 检查支付状态
const checkPaymentStatus = () => {
  if (!orderId) return
  
  const timer = setInterval(() => {
    orderApi.getOrderPayStatus(orderId).then(res => {
      if (res.data.isPaid) {
        clearInterval(timer)
        paymentSuccess.value = true
      }
    }).catch(() => {
      clearInterval(timer)
    })
  }, 2000)
  
  // 30秒后停止轮询
  setTimeout(() => {
    clearInterval(timer)
  }, 30000)
}

// 查看订单详情
const goToOrderDetail = () => {
  showPaymentResult.value = false
  Taro.redirectTo({
    url: `/pages/order/detail?id=${orderId}`
  })
}

// 返回首页
const goToHome = () => {
  showPaymentResult.value = false
  Taro.switchTab({
    url: '/pages/index/index'
  })
}

// 重新支付
const retryPayment = () => {
  showPaymentResult.value = false
  handlePayment()
}

// 页面加载
onMounted(() => {
  fetchOrderInfo()
})
</script>

<style lang="scss">
.payment {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}

.amount-section {
  background-color: #fff;
  padding: 30px 16px;
  margin-bottom: 10px;
  text-align: center;
  
  .amount-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  
  .amount-value {
    .currency {
      font-size: 20px;
      font-weight: bold;
      color: #fa2c19;
    }
    
    .value {
      font-size: 32px;
      font-weight: bold;
      color: #fa2c19;
    }
  }
}

.payment-methods,
.order-info {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 10px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.method-list {
  .method-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.active {
      .method-name {
        color: #fa2c19;
      }
    }
    
    .method-icon {
      margin-right: 10px;
    }
    
    .method-info {
      flex: 1;
      
      .method-name {
        font-size: 14px;
        margin-bottom: 4px;
      }
      
      .method-desc {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.order-info {
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: #666;
    }
    
    .value {
      color: #333;
    }
  }
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.payment-result {
  text-align: center;
  
  .result-icon {
    margin-bottom: 15px;
  }
  
  .result-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .result-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
  
  .result-actions {
    display: flex;
    justify-content: center;
    
    .nut-button {
      margin: 0 5px;
    }
  }
}
</style>